<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>例子列表</title>
		<style type="text/css">
		body{
			padding: 0;
			margin: 0;
		}
			.list{
				box-sizing: border-box;
				width: 200px;
				border-right: 4px double dodgerblue;
				margin:10px 0 0 10px;
				padding: 0;
				float: left;
				overflow: scroll;
			}
			.list >li{
				cursor: pointer;
				margin:0 0 0 30px;
				padding: 0;
			}
			.list >li:hover{
				background-color: lightblue;
			}
			.display{
				margin-top: 10px;
				margin-left: 10px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<ol class="list" id="list">
			<li><a href="app/1-helloworld/example1-5.html" target="display">example1-5</a></li>
			<li><a href="app/1-helloworld/example6-10.html" target="display">example6-10</a></li>
		</ol>
		<iframe src="" class="display" id="display" name="display"></iframe>
	</body>
	<script type="text/javascript">
		var list = document.getElementById("list");
		var display = document.getElementById("display");
		list.style.height=(screen.availHeight-100)+"px";
		display.style.width=(screen.availWidth-250)+"px";
		display.style.height = (screen.availHeight-100)+"px";
	</script>
</html>
